<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>实时监控 -樱桃检测预警平台</title>
    <link rel="stylesheet" href="../static/css/elementui.css">
    <!-- 引入图标-->
    <link rel="shortcut icon" href="../static/img/favicon.ico" type="image/x-icon">
</head>
<style>
    .showResult{
        width: 750px;
        height:500px ;
    }
</style>
<body>
<div id="app">
    <!--header-->
    <el-header style="height: 20%">
        <!--导航栏-->
        <el-row>
            <el-col :span="2" >
                <img src="../static/img/first.jpg" style="width: 100px;margin-top: 4%">
            </el-col>
            <el-col hidden-sm-and-down :span="4">
                <img src="../static/img/word.jpg" style="width: 300px;margin-top: 7%">
            </el-col>
            <el-col :span="15">
                <el-menu default-active="3"
                         class="el-menu-demo headmenu"
                         mode="horizontal"
                         active-text-color="#85130f"
                         index="10">
                    <el-menu-item index="1" style="margin-top: 7%;color: #85130f" ><a href="index.html">首页</a></el-menu-item>
                    <el-menu-item index="2" style="margin-top: 7%;color: #85130f"><a href="datareport.html">数据报表</a></el-menu-item>
                    <el-menu-item index="3" style="margin-top: 7%;color: #85130f"><a href="monitoring.html">实时监控</a></el-menu-item>
                    <el-menu-item index="5" style="margin-top: 7%;color: #85130f"><a href="warning.html">预警分析</a></el-menu-item>
                    <el-menu-item index="6" style="margin-top: 7%;color: #85130f"><a href="datasearch.html">数据分析</a></el-menu-item>
                    <el-menu-item index="7" style="margin-top: 7%;color: #85130f"><a href="callus.html">联系我们</a></el-menu-item>

                </el-menu>

            </el-col>
        </el-row>

    </el-header>

    <el-main>
        <el-row>
            <!--实时监控-->
            <el-col :span="16">
                <!--选择设备-->
                <template>
                    <div style="text-align: center">
                        <!--下拉框-->
                        <span style="color: grey">请选择想查看的设备：</span>
                        <el-select v-model="nowEquipment.equipmentName" placeholder="请选择">
                            <el-option
                                    v-for="item in equipment"
                                    :key="item.id"
                                    :value="item.equipmentName">
                            </el-option>
                        </el-select>
                        <!--按钮-->
                        <el-button plain v-on:click="seachEquipmentByName">查询</el-button>
                    </div>
                </template>
                <!--监控设备-->
                <iframe name="monIframe"
                        width="100%" height="550px"
                        style="margin-top: 2%"
                        frameborder="no"
                        scrolling="no"
                        allowfullscreen="allowfullscreen"
                        :src="nowEquipment.videoUrl">
                </iframe>
            </el-col>
            <!--上传图片-->
            <el-col :span="8">
                <!--上传图片-->
                <div style="margin-left: 5%;margin-top: 5%">
<!--                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            multiple
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">查询分析结果</el-button>
                        <div slot="tip" class="el-upload__tip">一次性只能上传一张jpg/png文件，且不超过500kb</div>
                    </el-upload>-->
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary" onclick="changeSign">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">查询分析结果</el-button>
                        <div slot="tip" class="el-upload__tip">一次性只能上传一张jpg/png文件</div>
                    </el-upload>
                </div>
                <!--转换的时候添加淡出淡入效果-->
                <!--示例图片-->
                <div style="margin-left: 5%"><!--  v-if="!isAnalyze" -->
                    <span style="color: #6f7180">分析示例图：</span>
                    <div><img src="../static/img/suchas.jpg" style="height: 80%;width: 80%;margin-top: 3%"></div>
                </div>
<!--                <div style="margin-left: 5%;margin-top: 5%" v-if="isAnalyze">
                    <span style="color: #6f7180">分析结果：</span>
                    <div style="background-image: url('../static/img/show5.jpg');width: 100%;height:100%;background-repeat: no-repeat;margin-top: 3%">
                       &lt;!&ndash; <canvas id="canvas" width="200" height="300"></canvas>&ndash;&gt;
                    </div>
                </div>-->
            </el-col>
        </el-row>
    </el-main>


    <!--footer-->
    <el-footer style="height:180px">
        <el-row>
            <!--存放文字说明-->
            <el-col style="color: #85130f;text-align: center">
                <h3>萤检|樱桃害虫预警平台</h3>
                <div>联系电话:13333333333</div>
                emial:<span style="color: #3a8ee6">123@163.com</span>
                <div>地址:广东省广州市海珠区滨江街道仲恺路</div>
                <div>版权所有:萤检有限公司</div>
            </el-col>
        </el-row>
    </el-footer>

</div>
</body>

<script src="../static/js/monitoring.js" type="text/javascript"></script>

<!-- 引入vue和elementUI所需配置文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../static/js/vuejs-2.5.16.js"></script>
<script src="../static/js/elementui.js"></script>
<script src="../static/js/axios.js"></script>

<!-- 引入index.js文件
<script type="text/javascript" src="../static/js/index.js"></script>-->
<!-- 引入index.css文件 -->
<style>
    @import "../static/css/index.css";
</style>
<!-- util.js文件 -->
<script type="text/javascript" src="../static/js/jumpPage.js"></script>
<!--引入js文件-->
<script src="../static/js/index.js"></script>
<!--画图-->
<!--<script>
    const img = new Image();
    const canvas = document.querySelector("#canvas");
    let ctx;
    ctx = canvas.getContext("2d");
    // 当图片加载完再动手
    img.onload = function () {
        // 画布大小和图片尺寸不一样算好比例
        const cWidth = canvas.width, cHeight = canvas.height;
        const imgWidth = img.naturalWidth, imgHeight = img.naturalHeight;
        const zoom = {
            width: cWidth / imgWidth,
            height: cHeight / imgHeight,
        };
        // 以图画底
        ctx.drawImage(img, 0, 0, cWidth, cHeight);
        drawPicture();
    },
        // 动手
        img.src = "../static/img/show6.jpg";
    console.log("draw");
</script>-->
<script>
    searchEquip();
</script>
</html>
